<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>晨曦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div0 {
            width: 1920px;
            height: 480px;
            background-image: url(touxiang5.jpg);
        }

        .div1 {
            width: 500px;
            height: 143px;
        }

        .div2 {
            background-image: url(播放按钮1.jpg);
            background-repeat: no-repeat;
            background-position: right top;
        }

        .div3 {
            text-align: 2em;
        }

        .div4 {
            width: 300px;
            height: 400px;
            background-image: url(图片.jpg);
            background-repeat: repeat;
        }

        .div5 {
            width: 300px;
            height: 300px;
            position: absolute;
            right: 760px;
            /* top值指的是从页面上面开始往下的距离 */
            top: 900px;
        }


        .testview1 {
            margin: 20px;
            height: 70px;
            border-bottom: 3px solid pink;
        }

        .testview2 {
            margin: 10px;
            padding: 5px;
            font-family: Microsoft yahei;
            font-size: 17px;
            text-align： 2em;
            border: none;
            text-indent: 2em;
        }

        html {
            background: floralwhite;
            height: 100%;
        }

        /* 链接伪类选择器：
        a:link        选择所有未被访问的链接
        a:visited     选择所有已被访问的链接
        a:hover       选择鼠标指针位于其上的链接
        a:active      选择活动链接（鼠标指针按下未弹起的链接) */
        /* 链接伪类选择器在实际开发中的写法 */
        a {
            color: linear-gradient(to right, #ff0052, #0b71ee);
            text-decoration: none;
        }

        a:hover {
            color: greenyellow;
        }
    </style>
</head>

<body>
    <a href="#one"></a>
    <div class="div0"></div>
    <div class="testview1">
        <h1>张碧晨</h1>
        <h5>中国华语乐坛流行女歌手</h5>
    </div>
    <div class="testview2">
        <div>
            <!-- 锚点链接 -->
            <a href="#">
                <h3 id="one">个人简介</h3>
            </a>
            <p>张碧晨（Diamond，1989年9月10日-），出生于天津，毕业于天津外国语大学，中国内地女歌手。</p>
            <p>
                2013年，作为韩国女子组合“sunny
                days”成员出道，同年年底与公司解约回国发展。2014年10月7日，获得《中国好声音》第三季年度总冠军，成为“好声音”的首位女冠军。2015年，为电视剧《花千骨》演唱插曲《年轮》，2016年，凭借该曲获得第23届东方风云榜“年度十大金曲”奖、“最佳年度飞跃奖”和“全民选择女歌手”奖、第14届华鼎奖华语年度最受欢迎新锐歌手。同年，举办了个人首场“自饰北京演唱会”
                。2017年，演唱电视剧《楚乔传》片头曲《望》，电视剧《三生三世十里桃花》片尾曲《凉凉》，脍炙人口的传唱度让张碧晨人气更上一层楼，更是凭借《凉凉》入围“年度最受欢迎影视金曲”奖。2018年，获得第25届东方风云榜音乐盛典最受欢迎女歌手。
            </p>
        </div>

        <div class="div1">
            <a href="#">
                <h3>主要作品</h3>
            </a>
            <!-- 歌曲链接部分及播放图标的插入 -->
            <a
                href="https://i.y.qq.com/n2/m/playsong/index.html?songmid=001q62Bb1xCTx7&CPUV=93&channelId=10048847&ADTAG=sougouald">
                <div class="div2">年轮</div>
            </a>
            <a href="https://m3ws.kugou.com/kgsong/1q1lit66.html?from_sogou">
                <div class="div2">星空剪影</div>
            </a>
            <a href="http://m.kuwo.cn/newh5app/play_detail/157772606?from=sougou">
                <div class="div2">骗</div>
            </a>
            <a href="https://m3ws.kugou.com/kgsong/n61vd1b.html?from_sogou">
                <div class="div2">只要平凡</div>
            </a>
            <a
                href="https://i.y.qq.com/v8/playsong.html?songmid=001tpoQo3RoYz0&CPUV=93&channelId=10048847&ADTAG=sougouald">
                <div class="div2">望</div>
            </a>
        </div>

        <span>
            <!-- 好友左边部分 -->
            <div class="div3"><a href="#">
                    <h3>好友</h3>
                </a>
                <p><a href="https://baike.sogou.com/m/fullLemma?lid=4297323&key=%E8%B5%B5%E4%B8%BD%E9%A2%96&rcer=1gInhEOkJY9VFRlplU#lemmaHome"
                        target="_blank">
                        <h5>赵丽颖</h5>
                    </a></p>
                <!-- 将p标签放入到链接中，链接才能生效 -->
                <a href="https://m.weibo.cn/p/1008084ea8c608f6b0179a56ccc5fca9ed9bba?k=%E8%B5%B5%E4%B8%BD%E9%A2%96%E5%BC%A0%E7%A2%A7%E6%99%A8"
                    target="_blank">
                    <p class="div4"></p>
                </a>
            </div>

            <!-- 好友右边部分 -->
            <div class="div5">
                <p><a href="https://baike.sogou.com/m/fullLemma?lid=48636&key=%E5%91%A8%E7%AC%94%E7%95%85&rcer=1gInhEOkJY9VFRlplU#lemmaHom"
                        target="_blank">
                        <h5>周笔畅</h5>
                    </a></p>
                <p>
                    <img src="touxiang7.jpg" />
                </p>
            </div>
            <span>

    </div>
</body>

</html>